<template>
  <div class="object-container">
    <!-- 左侧表单 -->
    <div class="object-form">
      <!-- 标题 -->
      <h2 class="form-title">Object Creation</h2>

      <!-- 创建表单 -->
      <el-form :model="objectForm" label-width="80px">
        <el-form-item label="Model">
          <el-button @click="handleChooseModel">Choose</el-button>
        </el-form-item>

        <el-form-item label="Geometry">
          <el-select
            v-model="objectForm.geometryId"
            placeholder="choose"
            style="width: 100%"
            @change="handleGeometryChange"
          >
            <el-option
              v-for="item in geometryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <!-- 新增模块 -->
      <div v-if="objectForm.geometryId" class="geometry-details">
        <div class="details-header">
          <el-divider>Object Creation</el-divider>
          <div class="details-actions">
            <el-button type="primary" size="primary" @click="generate">generate</el-button>
          </div>
        </div>
        <el-form :model="geometryDetails" label-width="120px">
          <el-form-item label="Quantity">
            <el-input-number
              v-model="geometryDetails.quantity"
              :min="1"
              :step="1"
              :precision="0"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="Min Spacing" v-if="isPolygonOrPolyline">
            <el-input-number
              v-model="geometryDetails.minSpacing"
              :min="0"
              :step="1"
              :precision="2"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="Rotation">
            <el-form :model="geometryDetails.rotation" label-width="80px">
              <el-form-item label="" v-if="isPolyline">
                <el-switch v-model="geometryDetails.rotation.relativeYaw" /><span>&nbsp;&nbsp;Relative to Tangent</span>
              </el-form-item>
              <el-form-item label="Yaw">
                <el-input-number
                  v-if="!geometryDetails.rotation.yawRange"
                  v-model="geometryDetails.rotation.yaw"
                  :min="0"
                  :max="360"
                  :step="1"
                  :precision="2"
                  controls-position="right"
                />
                <div v-else>
                  <el-input-number
                    v-model="geometryDetails.rotation.yaw[0]"
                    :min="0"
                    :max="360"
                    :step="1"
                    :precision="2"
                    controls-position="right"
                  />
                  <el-input-number
                    v-model="geometryDetails.rotation.yaw[1]"
                    :min="0"
                    :max="360"
                    :step="1"
                    :precision="2"
                  />
                </div>
                <el-checkbox v-model="geometryDetails.rotation.yawRange">Rand</el-checkbox>
              </el-form-item>
              <el-form-item label="Pitch">
                <el-input-number
                  v-if="!geometryDetails.rotation.pitchRange"
                  v-model="geometryDetails.rotation.pitch"
                  :min="0"
                  :max="360"
                  :step="1"
                  :precision="2"
                  controls-position="right"
                />
                <div v-else>
                  <el-input-number
                    v-model="geometryDetails.rotation.pitch[0]"
                    :min="0"
                    :max="360"
                    :step="1"
                    :precision="2"
                    controls-position="right"
                  />
                  <el-input-number
                    v-model="geometryDetails.rotation.pitch[1]"
                    :min="0"
                    :max="360"
                    :step="1"
                    :precision="2"
                    controls-position="right"
                  />
                </div>
                <el-checkbox v-model="geometryDetails.rotation.pitchRange">Rand</el-checkbox>
              </el-form-item>
              <el-form-item label="Roll">
                <el-input-number
                  v-if="!geometryDetails.rotation.rollRange"
                  v-model="geometryDetails.rotation.roll"
                  :min="0"
                  :max="360"
                  :step="1"
                  :precision="2"
                  controls-position="right"
                />
                <div v-else>
                  <el-input-number
                    v-model="geometryDetails.rotation.roll[0]"
                    :min="0"
                    :max="360"
                    :step="1"
                    :precision="2"
                    controls-position="right"
                  />
                  <el-input-number
                    v-model="geometryDetails.rotation.roll[1]"
                    :min="0"
                    :max="360"
                    :step="1"
                    :precision="2"
                    controls-position="right"
                  />
                </div>
                <el-checkbox v-model="geometryDetails.rotation.rollRange">Rand</el-checkbox>
              </el-form-item>
            </el-form>
          </el-form-item>
          <el-form-item label="Scale">
            <el-form :model="geometryDetails.scale" label-width="80px">
              <el-form-item label="X">
                <el-input-number
                  v-if="!geometryDetails.scale.xRange"
                  v-model="geometryDetails.scale.x"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :precision="2"
                  controls-position="right"
                />
                <div v-else>
                  <el-input-number
                    v-model="geometryDetails.scale.x[0]"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    :precision="2"
                    controls-position="right"
                  />
                  <el-input-number
                    v-model="geometryDetails.scale.x[1]"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    :precision="2"
                    controls-position="right"
                  />
                </div>
                <el-checkbox v-model="geometryDetails.scale.xRange">Rand</el-checkbox>
              </el-form-item>
              <el-form-item label="Y">
                <el-input-number
                  v-if="!geometryDetails.scale.yRange"
                  v-model="geometryDetails.scale.y"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :precision="2"
                  controls-position="right"
                />
                <div v-else>
                  <el-input-number
                    v-model="geometryDetails.scale.y[0]"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    :precision="2"
                    controls-position="right"
                  />
                  <el-input-number
                    v-model="geometryDetails.scale.y[1]"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    :precision="2"
                    controls-position="right"
                  />
                </div>
                <el-checkbox v-model="geometryDetails.scale.yRange">Rand</el-checkbox>
              </el-form-item>
              <el-form-item label="Z">
                <el-input-number
                  v-if="!geometryDetails.scale.zRange"
                  v-model="geometryDetails.scale.z"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :precision="2"
                  controls-position="right"
                />
                <div v-else>
                  <el-input-number
                    v-model="geometryDetails.scale.z[0]"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    :precision="2"
                    controls-position="right"
                  />
                  <el-input-number
                    v-model="geometryDetails.scale.z[1]"
                    :min="0"
                    :max="1"
                    :step="0.01"
                    :precision="2"
                    controls-position="right"
                  />
                </div>
                <el-checkbox v-model="geometryDetails.scale.zRange">Rand</el-checkbox>
              </el-form-item>
            </el-form>
          </el-form-item>
        </el-form>
      </div>

      <!-- Save button for generated objects -->
      <div v-if="showSaveButton" class="save-section">
        <el-button type="success" @click="handleSave">Save</el-button>
      </div>

      <!-- 选中对象的详细信息 -->
      <div v-if="selectedObject" class="object-details">
        <div class="details-header">
          <el-divider>Object Details</el-divider>
          <div class="details-actions">
            <el-button type="primary" size="small" @click="handleUpdate">save</el-button>
            <el-button type="danger" size="small" @click="handleDelete">delete</el-button>
          </div>
        </div>

        <el-form :model="selectedObject" label-width="80px">
          <el-form-item label="ID">
            <el-input v-model="selectedObject.id" disabled />
          </el-form-item>
          <el-form-item label="Model ID">
            <el-input v-model="selectedObject.modelId" disabled />
          </el-form-item>

          <!-- Position -->
          <el-form-item label="Position">
            <div class="coordinate-group">
              <div class="coordinate-item">
                <span class="coordinate-label">X:</span>
                <el-input-number
                  v-model="selectedObject.position.x"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :precision="2"
                  controls-position="right"
                />
              </div>
              <div class="coordinate-item">
                <span class="coordinate-label">Y:</span>
                <el-input-number
                  v-model="selectedObject.position.y"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :precision="2"
                  controls-position="right"
                />
              </div>
              <div class="coordinate-item">
                <span class="coordinate-label">Z:</span>
                <el-input-number
                  v-model="selectedObject.position.z"
                  :min="0"
                  :max="1"
                  :step="0.01"
                  :precision="2"
                  controls-position="right"
                />
              </div>
            </div>
          </el-form-item>

          <!-- Rotation -->
          <el-form-item label="Rotation">
            <div class="coordinate-group">
              <div class="coordinate-item">
                <span class="coordinate-label">Yaw:</span>
                <el-input-number
                  v-model="selectedObject.rotation.yaw"
                  :min="0"
                  :max="360"
                  :step="1"
                  :precision="2"
                  controls-position="right"
                />
              </div>
              <div class="coordinate-item">
                <span class="coordinate-label">Pitch:</span>
                <el-input-number
                  v-model="selectedObject.rotation.pitch"
                  :min="0"
                  :max="360"
                  :step="1"
                  :precision="2"
                  controls-position="right"
                />
              </div>
              <div class="coordinate-item">
                <span class="coordinate-label">Roll:</span>
                <el-input-number
                  v-model="selectedObject.rotation.roll"
                  :min="0"
                  :max="360"
                  :step="1"
                  :precision="2"
                  controls-position="right"
                />
              </div>
            </div>
          </el-form-item>

          <!-- Scale -->
          <el-form-item label="Scale">
            <div class="coordinate-group">
              <div class="coordinate-item">
                <span class="coordinate-label">X:</span>
                <el-input-number
                  v-model="selectedObject.scale.x"
                  :min="0.1"
                  :max="10"
                  :step="0.1"
                  :precision="2"
                  controls-position="right"
                />
              </div>
              <div class="coordinate-item">
                <span class="coordinate-label">Y:</span>
                <el-input-number
                  v-model="selectedObject.scale.y"
                  :min="0.1"
                  :max="10"
                  :step="0.1"
                  :precision="2"
                  controls-position="right"
                />
              </div>
              <div class="coordinate-item">
                <span class="coordinate-label">Z:</span>
                <el-input-number
                  v-model="selectedObject.scale.z"
                  :min="0.1"
                  :max="10"
                  :step="0.1"
                  :precision="2"
                  controls-position="right"
                />
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 右侧画布 -->
    <div class="object-canvas" :style="backgroundStyle" ref="canvasContainer">
      <canvas ref="canvas"></canvas>
      <!-- 箭头图标容器 -->
      <div class="arrow-container">
        <div
          v-for="item in objectPositions"
          :key="item.id"
          class="arrow-icon"
          :class="{ 'selected': modelIds.includes(item.modelId) }"
          :style="{
            left: `${item.position.x * 100}%`,
            top: `${item.position.y * 100}%`,
            transform: `translate(-50%, -50%) rotate(${item.rotation.yaw}deg)`
          }"
          @click="handleSelectObject(item)"
        >
          <div class="icon-wrapper">
            <el-icon :size="20" :color="modelIds.includes(item.modelId) ? '#67C23A' : '#409EFF'">
              <Top />
            </el-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 树形下拉弹窗 -->
    <el-dialog v-model="dialogVisible" title="Choose Model" width="30%">
      <el-tree
        ref="tree"
        :data="modelTree"
        show-checkbox
        node-key="value"
        default-expand-all="true"
        @check-change="handleCheckChange"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="handleConfirm">Confirm</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, computed, watch, onBeforeUnmount} from 'vue'
import {getMap, getGeometryList, objectList, objectUpdate, objectDelete, getObjectModels, objectGenerate, objectConfirm} from '../api' // 添加 objectConfirm 引入
import
{ ElMessage, ElMessageBox } from 'element-plus'
import { Top } from '@element-plus/icons-vue'

const canvas = ref(null)
const canvasContainer = ref(null)
const ctx = ref(null)
const backgroundStyle = ref({})
const geometryList = ref([]) // 几何图形列表
const objectPositions = ref([]) // 存储元素位置信息
const modelTree = ref([]) // 模型树形数据
const dialogVisible = ref(false) // 弹窗显示状态
const selectedModels = ref([]) // 选中的模型
const showSaveButton = ref(false) // 是否显示保存按钮

// 表单数据
const objectForm = reactive({
  geometryId: '', // 选中的几何图形ID
  modelPath: '', // 模型路径
})

// 新增 geometryDetails 数据
const geometryDetails = reactive({
  quantity: 1,
  minSpacing: 0.0,
  rotation: {
    yaw: 0,
    pitch: 0,
    roll: 0,
    relativeYaw: false,
    yawRange: false,
    pitchRange: false,
    rollRange: false
  },
  scale: {
    x: 1,
    y: 1,
    z: 1,
    xRange: false,
    yRange: false,
    zRange: false
  }
})

// 计算属性，判断是否为 Polygon 或 Polyline
const isPolygonOrPolyline = computed(() => {
  const geometry = geometryList.value.find(item => item.id === objectForm.geometryId)
  return geometry && ['Polygon', 'Polyline'].includes(geometry.category)
})

// 计算属性，判断是否为 Polyline
const isPolyline = computed(() => {
  const geometry = geometryList.value.find(item => item.id === objectForm.geometryId)
  return geometry && geometry.category === 'Polyline'
})

// 添加选中对象的状态
const selectedObject = ref(null)

// 新增 modelIds 数组
const modelIds = ref([])

// 初始化画布
function initCanvas() {
  const container = canvasContainer.value
  const canvasEl = canvas.value
  canvasEl.width = container.clientWidth
  canvasEl.height = container.clientHeight
  ctx.value = canvasEl.getContext('2d')
}

// 获取背景图片
function getBackgroundImage() {
  getMap().then(res => {
    if (res.success) {
      backgroundStyle.value = {
        backgroundImage: `url(${res.image})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat'
      }
    }
  })
}

// 获取几何图形列表
function fetchGeometryList() {
  getGeometryList().then(res => {
    if (res.success) {
      geometryList.value = res.data
    } else {
      ElMessage.error('fetch shape list fail')
    }
  })
}

// 获取对象列表
function fetchObjectList() {
  objectList({}).then(res => {
    if (res.success) {
      objectPositions.value = res.data
    } else {
      ElMessage.error('get object list fail')
    }
  })
}

// 处理对象选中
function handleSelectObject(object) {
  if (!modelIds.value.includes(object.modelId)) {
    modelIds.value.push(object.modelId)
  }
  selectedObject.value = object
}

// 选择模型，获取位置信息
function handleChooseModel() {
  getObjectModels().then(res => {
    if (res.success) {
      modelTree.value = buildTree(res.data) // 构建树形数据
      dialogVisible.value = true // 显示弹窗
    } else {
      ElMessage.error('get model list fail')
    }
  })
}

// 构建树形数据
function buildTree(data) {
  if (!data) return [];

  const node = {
    label: data.name, // 确保每个节点都有 label 属性
    value: data.modelId || data.id || '', // 确保每个节点都有 value 属性
  };

  if (data.children && data.children.length > 0) {
    node.children = data.children.map(child => buildTree(child)[0]); // 确保子节点能够正确展开
  }

  return [node];
}

// 列出所有 Object
function handleGeometryChange() {
  if (!objectForm.geometryId) {
    ElMessage.warning('choose shape first please')
    return
  }
  selectedObject.value = null
  modelIds.value = [] // 清空 modelIds 数组
  objectPositions.value = [] // 清空对象位置信息，不显示Object信息
  showSaveButton.value = false // 隐藏保存按钮
  
  // 绘制选中的几何图形
  drawSelectedGeometry()
}

// 绘制选中的几何图形
function drawSelectedGeometry() {
  if (!ctx.value || !objectForm.geometryId) return
  
  // 清除画布
  ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height)
  
  // 找到选中的几何图形
  const selectedGeometry = geometryList.value.find(item => item.id === objectForm.geometryId)
  if (selectedGeometry) {
    drawGeometry(selectedGeometry)
  }
}

// 绘制几何图形
function drawGeometry(geometry) {
  const { type, coordinates } = geometry
  const container = canvasContainer.value
  const scale = {
    x: container.clientWidth,
    y: container.clientHeight
  }

  ctx.value.beginPath()

  // 转换坐标
  const points = coordinates.map(point => ({
    x: point.x * scale.x,
    y: point.y * scale.y
  }))

  switch (type) {
    case 'Polygon':
      drawPolygon(points)
      break
    case 'Polyline':
      drawPolyline(points)
      break
    case 'PointSet':
      drawPointSet(points)
      break
  }
}

// 绘制多边形
function drawPolygon(points) {
  ctx.value.beginPath()
  ctx.value.moveTo(points[0].x, points[0].y)
  points.slice(1).forEach(point => {
    ctx.value.lineTo(point.x, point.y)
  })
  ctx.value.closePath()
  ctx.value.strokeStyle = '#409EFF'
  ctx.value.stroke()
  ctx.value.fillStyle = 'rgba(64, 158, 255, 0.2)'
  ctx.value.fill()
}

// 绘制多线段
function drawPolyline(points) {
  ctx.value.beginPath()
  ctx.value.moveTo(points[0].x, points[0].y)
  points.slice(1).forEach(point => {
    ctx.value.lineTo(point.x, point.y)
  })
  ctx.value.strokeStyle = '#67C23A'
  ctx.value.stroke()
}

// 绘制点集合
function drawPointSet(points) {
  points.forEach(point => {
    ctx.value.beginPath()
    ctx.value.arc(point.x, point.y, 4, 0, Math.PI * 2)
    ctx.value.fillStyle = '#F56C6C'
    ctx.value.fill()
  })
}

// 更新对象
function handleUpdate() {
  objectUpdate(selectedObject.value)
      .then(res => {
        if (res.success) {
          ElMessage.success('update success')
        } else {
          ElMessage.error('update fail')
        }
      })
}

// 删除对象
function handleDelete() {
  ElMessageBox.confirm('are you sure delete this object?', 'tips', {
    confirmButtonText: 'sure',
    cancelButtonText: 'cancel',
    type: 'warning'
  }).then(() => {
    objectDelete({
      id: selectedObject.value.id
    }).then(res => {
      if (res.success) {
        ElMessage.success('delete success')
        const index = modelIds.value.indexOf(selectedObject.value.modelId)
        if (index > -1) {
          modelIds.value.splice(index, 1)
        }
        selectedObject.value = null
        fetchObjectList()
      }
    })
  })
}

// 处理树形选择变化
function handleCheckChange(data, checked, indeterminate) {
  if (checked) {
    selectedModels.value.push(data.value)
  } else {
    const index = selectedModels.value.indexOf(data.value)
    if (index > -1) {
      selectedModels.value.splice(index, 1)
    }
  }
}

// const generatePositions = ref([]) // 预览的几何图形列表

// 预览模型
function generate() {
  if (selectedModels.value.length === 0) {
    ElMessage.warning('please choose model first')
    return
  }
  var params = geometryDetails
  params.modelIds = selectedModels.value
  params.geometryId = objectForm.geometryId
  objectGenerate(params).then(res => {
    if (res.success) {
      selectedObject.value = null
      // modelIds.value = [] // 清空 modelIds 数组
      // selectedModels.value = [] // 清空 selectedModels 数组
      objectPositions.value = res.data
      showSaveButton.value = true // 显示保存按钮
      // generatePositions.value = res.data
    }
  })
}

// 确认选择
function handleConfirm() {
  selectedModels.value = selectedModels.value.filter(model => model !== '')
  console.log('Selected models:', selectedModels.value)
  dialogVisible.value = false
}

// 保存生成的对象
function handleSave() {
  if (objectPositions.value.length === 0) {
    ElMessage.warning('No objects to save')
    return
  }
  
  const data = {
    objects: objectPositions.value
  }
  
  objectConfirm(data).then(res => {
    if (res.success) {
      ElMessage.success('Objects saved successfully')
      showSaveButton.value = false // 隐藏保存按钮
      // 清空相关状态
      objectForm.geometryId = '' // 清空选中的几何图形
      selectedModels.value = [] // 清空选中的模型
      selectedObject.value = null // 清空选中的对象
      modelIds.value = [] // 清空 modelIds 数组
      objectPositions.value = [] // 清空对象位置信息，隐藏红点
      // 清除画布
      if (ctx.value) {
        ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height)
      }
      // 重新获取对象列表以显示最新数据
      fetchObjectList()
    } else {
      ElMessage.error(res.message || 'Save failed')
    }
  }).catch(err => {
    ElMessage.error('Save failed')
    console.error('Save error:', err)
  })
}

// 监听 range 属性的变化
watch(() => geometryDetails.rotation.yawRange, (newValue) => {
  if (newValue) {
    geometryDetails.rotation.yaw = [0, 0]
  } else {
    geometryDetails.rotation.yaw = 0
  }
})

watch(() => geometryDetails.rotation.pitchRange, (newValue) => {
  if (newValue) {
    geometryDetails.rotation.pitch = [0, 0]
  } else {
    geometryDetails.rotation.pitch = 0
  }
})

watch(() => geometryDetails.rotation.rollRange, (newValue) => {
  if (newValue) {
    geometryDetails.rotation.roll = [0, 0]
  } else {
    geometryDetails.rotation.roll = 0
  }
})

watch(() => geometryDetails.scale.xRange, (newValue) => {
  if (newValue) {
    geometryDetails.scale.x = [1, 1]
  } else {
    geometryDetails.scale.x = 1
  }
})

watch(() => geometryDetails.scale.yRange, (newValue) => {
  if (newValue) {
    geometryDetails.scale.y = [1, 1]
  } else {
    geometryDetails.scale.y = 1
  }
})

watch(() => geometryDetails.scale.zRange, (newValue) => {
  if (newValue) {
    geometryDetails.scale.z = [1, 1]
  } else {
    geometryDetails.scale.z = 1
  }
})

// 新增对 rotation 和 scale 字段的校验逻辑
watch(() => geometryDetails.rotation.yaw, (newValue) => {
      if (geometryDetails.rotation.yawRange && newValue[1] < newValue[0] && newValue[1] != 0) {
        geometryDetails.rotation.yaw = [0, 0]
        ElMessage.error('The second value of Yaw must be greater than or equal to the first value.')
      }
    },
    {deep: true}
)

watch(() => geometryDetails.rotation.pitch, (newValue) => {
      if (geometryDetails.rotation.pitchRange && newValue[1] < newValue[0] && newValue[1] != 0) {
        geometryDetails.rotation.pitch = [0, 0]
        ElMessage.error('The second value of Pitch must be greater than or equal to the first value.')
      }
    },
    {deep: true}
)

watch(() => geometryDetails.rotation.roll, (newValue) => {
      if (geometryDetails.rotation.rollRange && newValue[1] < newValue[0] && newValue[1] != 0) {
        geometryDetails.rotation.roll = [0, 0]
        ElMessage.error('The second value of Roll must be greater than or equal to the first value.')
      }
    },
    {deep: true}
)

watch(() => geometryDetails.scale.x, (newValue) => {
      if (geometryDetails.scale.xRange && newValue[1] < newValue[0] && newValue[1] != 0) {
        geometryDetails.scale.x = [1, 1]
        ElMessage.error('The second value of X must be greater than or equal to the first value.')
      }
    },
    {deep: true}
)

watch(() => geometryDetails.scale.y, (newValue) => {
      if (geometryDetails.scale.yRange && newValue[1] < newValue[0] && newValue[1] != 0) {
        geometryDetails.scale.y = [1, 1]
        ElMessage.error('The second value of Y must be greater than or equal to the first value.')
      }
    },
    {deep: true}
)

watch(() => geometryDetails.scale.z, (newValue) => {
      if (geometryDetails.scale.zRange && newValue[1] < newValue[0] && newValue[1] != 0) {
        geometryDetails.scale.z = [1, 1]
        ElMessage.error('The second value of Z must be greater than or equal to the first value.')
      }
    },
    {deep: true}
)

onMounted(() => {
  resizePreview()
  getBackgroundImage()
  initCanvas()
  fetchGeometryList() // 获取几何图形列表
  fetchObjectList() // 获取对象列表
  // handleChooseModel() // 页面初始化默认打开弹窗

  // 监听窗口大小变化，重新调整画布大小
  window.addEventListener('resize', () => {
    initCanvas()
    resizePreview()
  })
})

function resizePreview() {
  if (canvasContainer.value) {
    canvasContainer.value.style.width = canvasContainer.value.offsetHeight + 'px'
  }
}

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizePreview)
})
</script>

<style scoped>
.object-container {
  display: flex;
  height: 100%;
  gap: 20px;
  overflow: hidden;
}

.object-form {
  width: 600px;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}

.object-canvas {
  height: 100%;
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  position: relative;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.form-title {
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  border-bottom: 1px solid #EBEEF5;
}

:deep(.el-form-item__label) {
  font-weight: bold;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-button) {
  font-weight: bold;
}

.arrow-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.arrow-icon {
  position: absolute;
  cursor: pointer;
  pointer-events: auto;
}

.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

.arrow-icon:hover .icon-wrapper {
  transform: scale(1.2);
}

.arrow-icon.selected {
  z-index: 1;
}

.object-details {
  margin-top: 20px;
}

.save-section {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.details-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.details-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.coordinate-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coordinate-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coordinate-label {
  width: 45px;
  text-align: right;
  color: #606266;
  font-size: 14px;
}

:deep(.el-input-number) {
  flex: 1;
}

:deep(.el-input-number .el-input__wrapper) {
  padding-right: 0;
}
</style>
